
<template>
  <div class="container">
    <el-dialog
      :title="editText"
      :visible.sync="dialogVisible"
      width="30%"
      @close="handleClose"
    >
      <!-- 表单区域 -->
      <el-form :model="addDirectoryform" :rules="rules" ref="ruleForm">
        <!-- 学科选择框 -->
        <el-form-item v-if="!urlId" label="所属学科" prop="subjectID">
          <el-select
            v-model="addDirectoryform.subjectID"
            placeholder="请选择学科"
          >
            <el-option
              v-for="item in directoryNames"
              :key="item.id"
              :label="item.subjectName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- 目录填写框 -->
        <el-form-item label="目录名称" prop="directoryName"
          ><el-input v-model="addDirectoryform.directoryName"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { list } from '@/api/hmmm/subjects'
import { add, update } from '@/api/hmmm/directorys'
export default {
  name: 'container',
  props: {
    // 父组件传值 添加还是删除
    isedit: {
      type: Boolean,
      required: true
    },
    // 父组件传值 修改那个目录的数据
    row: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      // 新增目录表单信息
      addDirectoryform: {
        subjectID: '',
        directoryName: ''
      },
      // 控制弹框一直显示
      dialogVisible: true,
      // 获取到的科目名称列表
      directoryNames: [],
      // 弹框目录表单验证信息
      rules: {
        subjectID: [
          { required: true, message: '请输入项目所属学科', trigger: 'blur' }
        ],
        directoryName: [
          { required: true, message: '请输入项目名称', trigger: 'blur' },
          { min: 2, max: 8, message: '长度在 2 到 8 个字符', trigger: 'blur' }
        ]
      },
      // 存储地址id参数
      urlId: 0
    }
  },
  computed: {
    // 添加还是修改文字显示
    editText: function () {
      if (this.isedit) {
        return '修改目录'
      } else {
        return '添加目录'
      }
    }
  },
  created () {
    // 获取学科列表
    this.getobjectList()
    // 判断当前要不要填数据 如果是修改就填数据
    this.isdata()
    // 储存url id信息
    this.urlId = Number(this.$route.query.id)
  },
  methods: {
    // 获取学科列表
    async getobjectList () {
      // 获取当前学科列表
      try {
        const { data } = await list()
        this.directoryNames = data.items
      } catch (err) {
        console.log(err)
      }
    },
    isdata () {
      if (this.isedit) {
        // 需要求数据填充
        this.addDirectoryform.subjectID = this.row.subjectID
        this.addDirectoryform.directoryName = this.row.directoryName
      }
    },
    // 点击取消
    cancel () {
      // 通知父组件关闭弹框
      this.$emit('cancelDialog')
    },
    // 点击确认
    async confirm () {
      this.$refs.ruleForm.validate(async (valid) => {
        if (!valid) return
        // 判断添加修改
        if (this.isedit) {
          // 修改
          try {
            await update({
              id: this.row.id,
              directoryName: this.addDirectoryform.directoryName.trim(),
              subjectID: this.urlId
                ? this.urlId
                : this.addDirectoryform.subjectID
            })
            this.$message.success('修改成功')
          } catch (err) {
            if (JSON.stringify(err).indexOf('422')) {
              console.log(11)
              return this.$message.error('字段不能为空')
            }
            return this.$message.error(err)
          }
        } else {
          // 判断为添加
          try {
            // 添加
            await add({
              directoryName: this.addDirectoryform.directoryName.trim(),
              subjectID: this.urlId
                ? this.urlId
                : this.addDirectoryform.subjectID
            })
            this.$message.success('添加成功')
          } catch (err) {
            if (JSON.stringify(err).indexOf('422')) {
              console.log(11)
              return this.$message.error('字段不能为空')
            }
            return this.$message.error(err)
          }
        }
        // 通知关闭弹框;
        this.$emit('confirmDialog')
      })
    },
    // 弹框关闭
    handleClose () {
      // 告诉父组件进行重置操作清空表单
      this.$emit('closeDialog')
    }
  }
}
</script>

<style scoped>
.el-form{
  width: 400px;
}
.el-select {
  width: 280px;
}
.el-input{
  width: 280px;
}
.dialog-footer{
  text-align: right;
}
</style>
